*{
  padding:0;
  margin: 0;
}
body{
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: black;
  width: 100vw;
  height: 100vh;
  /* 视距 */
  perspective:1000px;
}
section{
  position: relative;
  width: 150px;
  height: 150px;
  /* border: 1px solid red; */
  /* 让子元素保留其3D位置 */
  transform-style: preserve-3d;
  /* 动画 名称 时长 linear infinite */
  animation: rotate 5s linear infinite;
}
section div{
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-color: #fff;
  transition: all 1s;
}
section div img{
  width: 100%;
  height: 100%;
}
section div:nth-child(1){
  transform: translateZ(75px);
}
section:hover div:nth-child(1){
  transform: translateZ(200px);
}
section div:nth-child(2){
  transform: rotateX(-180deg) translateZ(75px);
}
section:hover div:nth-child(2){
  transform: rotateX(-180deg) translateZ(200px);
}
 section div:nth-child(3){
  transform: rotateX(90deg) translateZ(75px);
}
section:hover div:nth-child(3){
  transform: rotateX(90deg) translateZ(200px);
}
section div:nth-child(4){
  transform: rotateX(-90deg) translateZ(75px);
} 
section:hover div:nth-child(4){
  transform: rotateX(-90deg) translateZ(200px);
}
section div:nth-child(5){
  transform: rotateY(90deg) translateZ(75px);
}
section:hover div:nth-child(5){
  transform: rotateY(90deg) translateZ(200px);
}

section div:nth-child(6){
  transform: rotateY(-90deg) translateZ(75px);
}

section:hover div:nth-child(6){
  transform: rotateY(-90deg) translateZ(200px);
}






section div:nth-child(7){
  transform: translateZ(75px);
}
section div:nth-child(8){
  transform: rotateX(180deg) translateZ(75px);
}
section div:nth-child(9){
  transform: rotateX(90deg) translateZ(75px);
}
section div:nth-child(10){
  transform: rotateX(-90deg) translateZ(75px);
}
section div:nth-child(11){
  transform: rotateY(90deg) translateZ(75px);
}
section div:nth-child(12){
  transform: rotateY(-90deg) translateZ(75px);
}

@keyframes rotate{
  0%{
    transform: rotateY(0) rotateX(0);
  }
  100%{
    transform: rotateY(360deg) rotateX(360deg);
  }
}